<template>

  <div>

    <Card>

      <div class="p-relative" style="padding-top: 10px;">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
            <Button type="warning" @click='create'>添加</Button>
          </div>

        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">

       <template slot-scope="{ row, index }" slot="status" >
         <i-switch size="large"  v-model="row.status==1?true:false"  @on-change='status(row,index)'   true-color="#13ce66" false-color="#ff4949" >
           <span slot="open" >启用</span>
            <span slot="close" >禁用</span>
          </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="is_menu" >
        <i-switch size="large"   v-model="row.is_menu==1?true:false"  @on-change='is_menu(row,index)'   true-color="#13ce66" false-color="#ff4949" >
           <span slot="open" >是</span>
            <span slot="close" >否</span>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='warning' @click="edit(row, index)" size='small'>编辑</Button>
            <Button type='error' @click="del(row, index)" size='small'>删除</Button>
          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>

    </Card>


    <!-- 添加弹窗 -->
    <Modal v-model="createModal" :title="createTitle" width='600'>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <FormItem label="归属父级">
          <Select v-model="formValidate.pid" @on-change="changePid" :filterable="true" style="  margin-right: 10px;" placeholder='请选择父级菜单'>
            <Option :value="item.id" v-for="item in data.navList">{{item.name}}{{item.controller_name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入菜单或权限名称 例:订单管理或添加"></Input>
        </FormItem>
        <FormItem label="控制器名称" prop="controller_name">
          <Input v-model="formValidate.controller_name" placeholder="请输入控制器名称 例:order或userVip"></Input>
        </FormItem>
        <FormItem label="入口函数" prop="action_name">
          <Input v-model="formValidate.action_name" placeholder="请输入入口函数 例:add"></Input>
        </FormItem>
       <FormItem label="是否菜单">
          <RadioGroup v-model="formValidate.is_menu">
            <Radio label="1">是</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
            <Radio label="0">否</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
          </RadioGroup>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formValidate.status">
            <Radio label="1">启用</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
            <Radio label="0">禁用</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='createModal=false'>取消</Button>
        <Button type="warning" @click="save('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>


    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除该数据吗？
      </p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>



  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    getList,
    add,
    put,
    del,
    is_menu,
    change

  } from '@/api/permissions-group/auth-rule'
  import {
    tableOption
  } from '../../../data/permissions-group/auth-rule.js'
  import Tables from '_c/tables'

  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables

    },
    created() {
      let _this = this
     this.$nextTick(function() {
      _this.role_add = permission(this.roles, 'permissions/add')
      _this.role_edit = permission(this.roles, 'permissions/edit')
      _this.role_del = permission(this.roles, 'permissions/delete')
      _this.role_status = permission(this.roles, 'permissions/status')

     })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
           roles: state => state.user.roles

      }),

    },
    data() {

      return {
        role_add: false,
        role_edit: false,
        role_del: false,
        role_status: false,

        delModal: false,
        createModal: false,
        createTitle: '添加',
        isAdd: true, // 新增true,修改false
        detailModal: false,
        loadingText: '',
        tableOption: tableOption,
        page: {
          current: 1,
          total: 0,
          pageSize: 10,

        },
        data: {
          detail: [],
          list: [],

        },
        formValidate: {
          name: '',
          pid: '',
          status: '1',
          type: '0',
          controller_name: '',
          actin_name: '',
          is_menu: '0'
        },
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        ruleValidate: {
          name: [{
            required: true,
            message: '请输入菜单或权限名称',
            trigger: 'blur'
          }],
          controller_name: [{
            required: true,
            message: '请输入控制器名称',
            trigger: 'blur'
          }],
          actin_name: [{
            required: true,
            message: '请输入入口函数',
            trigger: 'change'
          }],

          type: [{
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }],
        },
        rowId: 0,

      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this
        let params = {
          page: this.page.current,
        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.data.navList = result.navList
            _this.page.total = result.total
            _this.page.pageSize = result.size

          }
        }).catch(function(error) {
          // 异常

        })
      },
      changepage(e) {
        this.page.current = e;
        this.getList();

      },
      // 刷新
      refresh() {

        this.getList()
      },
      // 新增
      create() {
        if (!this.role_add) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true

        this.createTitle = '添加菜单权限'
        this.isAdd = true
        this.formValidate = {} // 表单重置
        this.formValidate.status = '1';
         this.formValidate.is_menu = '0';
        this.handleReset('formValidate') // 验证重置
      },
      // 修改
      edit(row) {
  if (!this.role_edit) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true
        this.createTitle = '编辑菜单权限'
        this.isAdd = false
        this.formValidate = {} // 表单重置
        this.formValidate = JSON.parse(JSON.stringify(row))
        this.formValidate.status = this.formValidate.status.toString()
        this.formValidate.pid = this.formValidate.pid
        this.formValidate.is_menu = this.formValidate.is_menu.toString()
        this.handleReset('formValidate') // 验证重置
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },
      save(name) {

        let _this = this

        this.$refs[name].validate((valid) => {
          if (valid) {
            if (_this.isAdd) {
              // 新增
              let obj = {
                name: _this.formValidate.name,
                pid: _this.formValidate.pid,
                status: _this.formValidate.status,
                is_menu: _this.formValidate.is_menu,
                controller_name: _this.formValidate.controller_name,
                action_name: _this.formValidate.action_name
              }

              // 新增接口
              add(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false
                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  _this.createModal = false
                  // axios响应拦截
                }
              }).catch(function(error) {

                console.log(error)
              })
            } else {
              // 修改

              let obj = {
                id: _this.formValidate.id,
                name: _this.formValidate.name,
                pid: _this.formValidate.pid,
                status: _this.formValidate.status,
                is_menu: _this.formValidate.is_menu,
                controller_name: _this.formValidate.controller_name,
                action_name: _this.formValidate.action_name
              }

              // 修改接口
              put(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false

                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {

                }
              }).catch(function(error) {
                // 异常
                console.log(error)
              })
            }

          } else {
            this.$Message.error('请输入必填项!')
          }
        })
      },

      // 删除
      del(row) {
        if (!this.role_del) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.delId = row.id
        this.delModal = true
        // 删除接口
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.delId
        }
        del(obj).then(res => {
          if (res.data.status == 1) {

            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false

          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      changType(e) {

      },
      status(row,index) {
        // if (!this.role_status) {
        //   let config = {
        //     content: '您没有操作权限',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        let _this = this;
        let obj = {
            id:row.id,
            act:'status',
            value:row.status==1?0:1
        }

        // 修改状态
        change(obj).then(res => {
          if (res.data.status == 1) {
            _this.$Message.success('操作成功')
            _this.data.list[index].status = obj.value;
            // _this.getList(); //重新刷新数据
          } else {
            //响应拦截里处理
          }
        }).catch(function(error) {
          //异常
          console.log(error)
        })
      },
      is_menu(row,index) {
        // if (!this.role_menu) {
        //   let config = {
        //     content: '您没有操作权限',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        let _this = this;
        let obj = {
            id:row.id,
            act:'isMenu',
            value:row.is_menu==1?0:1
        }
        console.log(obj)
        // 修改状态
        change(obj).then(res => {
          if (res.data.status == 1) {
            _this.$Message.success('操作成功')
            _this.data.list[index].is_menu = obj.value;
            // _this.getList(); //重新刷新数据
          } else {
            //响应拦截里处理
          }
        }).catch(function(error) {
          //异常
          console.log(error)
        })
      },
      changePid(e){
        console.log(1122,e)
      }
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
